<template>
  <div class="transportCapacityRecord auditCmpt">
    <!-- isCarrier {{isCarrier}} -->
    <div class="form-baseinfo">
      <LPSearchBar
        v-model="searchModel"
        :search-data="searchData"
        label-width="100px"
        @handleSearchSubmit="handleSearchSubmit"
        @handleSearchReset="handleSearchReset"
      />
    </div>

    <div class="form-baseinfo">
      <div class="btn_area">
        <el-button
          v-hasPermi="['LaborProtection.OrdersRemote.Create']"
          size="medium"
          type="primary"
          @click="insertOrder"
          >下单</el-button
        >
      </div>
      <LPTablePage
        :show-index="true"
        :show-indexfixed="false"
        index-label="序号"
        :table-data="tableData"
        :table-column="tableColumn"
        :total="total"
        :current-page="currentPage"
        align="center"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
        <template slot="cz" slot-scope="{ row }">
          <el-button type="text" @click="handColumnClick(row, 'detail')">详情</el-button>
          <el-button
            v-if="row.status == 2"
            v-hasPermi="['LaborProtection.OrdersRemote.Revoke']"
            type="text"
            @click="handColumnClick(row, 'rescind')"
            >撤销</el-button
          >
          <!-- <el-button v-if="row.status == 1 || row.status == 2" type="text"
            @click="handColumnClick(row, 'change')">修改</el-button> -->
          <el-button
            v-if="row.status == 2"
            v-hasPermi="['LaborProtection.OrdersRemote.FinishSettle']"
            type="text"
            @click="handColumnClick(row, 'complete')"
            >完成</el-button
          >
          <el-button
            v-if="row.status == 1"
            v-hasPermi="['LaborProtection.OrdersRemote.Canceled']"
            type="text"
            @click="handColumnClick(row, 'cancel')"
          >
            取消</el-button
          >
          <el-button
            v-if="row.status == 1"
            v-hasPermi="['LaborProtection.OrdersRemote.Dispatch']"
            type="text"
            @click="handColumnClick(row, 'start')"
            >开始配送</el-button
          >
          <el-button
            v-if="row.status == -1"
            v-hasPermi="['LaborProtection.OrdersRemote.Delete']"
            type="text"
            @click="handColumnClick(row, 'delete')"
            >删除</el-button
          >
        </template>
      </LPTablePage>
    </div>
  </div>
</template>

<script>
import {
  revokeByIdOrder,
  dispatchByIdOrder,
  deleteByIdOrder,
  cancelByIdOrder,
  getRemoteOrderList
} from '@/api/LaborProtection/order'
import { parseTime } from '@/utils/lpUtils.js'
import LPTablePage from '@/components/LPTablePage/index.vue'
import LPSearchBar from '@/components/LPSearchBar/index.vue'

export default {
  name: 'RemoteOrder',
  components: { LPTablePage, LPSearchBar },
  data() {
    return {
      searchModel: {},
      searchData: [
        { label: '', placeholder: '员工卡号', prop: 'userCardNo', width: '100px' },
        { label: '', placeholder: '员工姓名', prop: 'UserName', width: '80px' },
        {
          label: '',
          placeholder: '状态',
          prop: 'Status',
          type: 'select',
          width: '80px',
          option: [
            { label: '已下单', value: 1 },
            { label: '派送中', value: 2 },
            // { label: '结算待确认', value: 3 },
            { label: '已结算', value: 4 },
            { label: '已取消', value: -1 }
          ]
        },
        { label: '', placeholder: '订单编号', prop: 'SONo' },
        {
          label: '',
          prop: 'StartOrderTime',
          type: 'datetimerange',
          placeholder: '开始时间',
          width: '100px'
        }
      ],
      tableData: [],
      tableColumn: [
        { label: '订单编号', prop: 'soNo' },
        { label: '姓名', prop: 'userName' },
        // { label: "卡号", prop: "userCardNo" },
        { label: '部门', prop: 'departmentName' },
        // { label: "岗位", prop: "jobName" },
        { label: '购买商品', prop: 'commodity' },
        { label: '订单金额', prop: 'soMoney' },
        { label: '订单状态', prop: 'statusName' },
        { label: '创建日期', prop: 'createTime' },
        { label: '操作', prop: 'cz', width: 200, render: true }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  mounted() {
    this.getList()
  },

  methods: {
    insertOrder() {
      this.$router.push({
        path: '/remoteOrder/components/insertOrder'
      })
    },
    handleSearchSubmit() {
      this.currentPage = 1
      this.getList()
    },
    handleSearchReset() {
      this.getList()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
      this.getList()
    },
    handleCurrentChange(v) {
      this.currentPage = v
      this.getList()
    },
    getList() {
      const params = {
        ...this.searchModel,
        SkipCount: this.currentPage,
        MaxResultCount: this.pageSize
      }
      if (typeof this.searchModel.StartOrderTime !== 'undefined') {
        params.SDateTime = parseTime(this.searchModel.StartOrderTime[0])
        params.EDateTime = parseTime(this.searchModel.StartOrderTime[1])
        this.$delete(params, 'StartOrderTime')
        console.log(params)
      }

      getRemoteOrderList(params).then((res) => {
        res.items.forEach((item) => {
          item.commodity = ''
          item.ordersProducts.forEach((order, index) => {
            if (index == 0) {
              item.commodity = order.pTitle
            } else {
              item.commodity = item.commodity + '、' + order.pTitle
            }
          })
        })
        this.tableData = res.items
        this.total = res.totalCount
      })
    },
    handColumnClick(row, name) {
      if (name == 'detail') {
        this.$router.push({
          path: '/remoteOrder/components/detail',
          query: {
            data: JSON.stringify({
              id: row.id,
              isDetail: true
            })
          }
        })
      } else if (name == 'change') {
        this.$router.push({
          path: '/remoteOrder/components/updateOrder',
          query: { id: row.id }
        })
      } else if (name == 'cancel') {
        this.$confirm('是否继续取消该订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            cancelByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message({
                  type: 'success',
                  message: '取消成功!'
                })
                this.handleSearchSubmit()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消该操作'
            })
          })
      } else if (name == 'delete') {
        this.$confirm('是否继续删除该订单？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            deleteByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.handleSearchSubmit()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消该操作'
            })
          })
      } else if (name == 'start') {
        this.$confirm('是否准备好产品，开始配送？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            dispatchByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message({
                  type: 'success',
                  message: '开始配送!'
                })
                this.handleSearchSubmit()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消该操作'
            })
          })
      } else if (name == 'rescind') {
        this.$confirm('是否撤销该单配送', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            revokeByIdOrder(row.id).then((res) => {
              if (!res.error) {
                this.$message({
                  type: 'success',
                  message: '撤销成功!'
                })
                this.handleSearchSubmit()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消该操作'
            })
          })
      } else if (name == 'complete') {
        this.$router.push({
          path: '/remoteOrder/components/detail',
          query: {
            data: JSON.stringify({
              id: row.id,
              isDetail: false
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.auditCmpt {
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
  .form-baseinfo:first-child {
    margin: 20px, 0, 20px, -10px;
    border-radius: 3px;
  }
  .form-baseinfo:last-child {
    background-color: #fff;
    .btn_area {
      padding: 0.2rem;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
  }
}
.transportCapacityRecord {
  .btn_area {
    margin-bottom: 0.1rem;
    padding-left: 0.1rem;
  }

  .form-baseinfo {
    // border: 1px solid #dcdfe6;
    // padding: 10px;

    ::v-deep .search-bar input.el-input__inner {
      width: 2rem;
    }
  }
}
</style>
